<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BytesBase</title>
  </head>
  <body>
    <div id="app">
      <style>
        body {
          background-color: #0033ff;
        }

        .center {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -180px;
          margin-left: -300px;
          width: 600px;
          height: 80px;
          font-family: "Lato", sans-serif;
          font-weight: 600;
          font-size: 16px;
          color: #fff;
          text-align: center;
          -webkit-font-smoothing: antialiased;
        }

        .error {
          color: #ff0000;
        }

        .loader {
          width: 80px;
          height: 80px;
          position: relative;
          margin: 60px auto;
        }

        .loader .dot {
          position: absolute;
          top: 0;
          left: 0;
          width: 80px;
          height: 80px;
          animation: 1.7s dotrotate cubic-bezier(0.775, 0.005, 0.31, 1) infinite;
        }

        .loader .dot:nth-child(1) {
          animation-delay: 0.2s;
        }

        .loader .dot:nth-child(2) {
          animation-delay: 0.35s;
        }

        .loader .dot:nth-child(3) {
          animation-delay: 0.45s;
        }

        .loader .dot:nth-child(4) {
          animation-delay: 0.55s;
        }

        .loader .dot:after,
        .loader .dot .first {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          background: white;
          border-radius: 50%;
          left: 50%;
          margin-left: -4px;
        }

        .loader .dot .first {
          background: #fff;
          margin-top: -4px;
          animation: 1.7s dotscale cubic-bezier(0.775, 0.005, 0.31, 1) infinite;
          animation-delay: 0.2s;
        }

        @keyframes dotrotate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        @keyframes dotscale {
          0%,
          10% {
            width: 16px;
            height: 16px;
            margin-left: -8px;
            margin-top: -4px;
          }
          50% {
            width: 8px;
            height: 8px;
            margin-left: -4px;
            margin-top: 0;
          }
          90%,
          100% {
            width: 16px;
            height: 16px;
            margin-left: -8px;
            margin-top: -4px;
          }
        }
      </style>
      <div class="center">
        <div class="loader">
          <div class="dot">
            <div class="first"></div>
          </div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div>Emer Loading ...</div>
        <noscript class="error">
          We're sorry but Emer doesn't work properly without JavaScript enabled. Please enable it to continue.
        </noscript>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
